<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app input{
        width: 90px;
        font-size:12px;
    }
    table{
        border-collapse:collapse;

    }
    table tr td{
        width: 60px;
        border:1px solid #000;
        text-align: center;
        background: rgb(178, 200, 240);
    }
    th{
        border:1px solid #000;
        background: rgb(235, 200, 181);
    }
</style>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="请输入用户名">
        <input type="text" v-model="sex" placeholder="请输入性别">
        <input type="text" v-model="jiguan" placeholder="请输入籍贯">
        <input type="text" v-model="phone" placeholder="请输入联系方式">
        <input type="text" v-model="age" placeholder="请输入年龄">
        <button @click="adduser">添加学员</button>
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
                <th>联系方式</th>
                <th @click="sortList">年龄
                    <span v-show="showType && !type">↑</span>
                    <span v-show="showType && type">↓</span>
                </th>
            </tr>
            <tr v-for="item in stu">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.jiguan}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                name: "", 
                sex:"",
                jiguan:"",
                phone:"",
                age:"",
                stu:[
                    {"id":1, "name":"国花","sex":"女", "jiguan":"湖南", "phone":"13522221111", "age":18},
                    {"id":2, "name":"春花","sex":"女", "jiguan":"河南", "phone":"13544441111", "age":19},
                    {"id":3, "name":"大山","sex":"男", "jiguan":"深圳", "phone":"13522221111", "age":20},
                    {"id":4, "name":"石头","sex":"男", "jiguan":"广州", "phone":"13533331111", "age":19},
                    {"id":5, "name":"富强","sex":"男", "jiguan":"北京", "phone":"13522229999", "age":22},
                ],
                type: true,//排序的升序或降序的开关  true  升序   false  降序
                showType: false, //是否显示 升降小图标  ,true  显示  false  不显示
            },
            methods:{
                adduser:function(){
                    //添加学员的函数
                    var myid = this.stu.length;
                    this.stu.push({
                        "id":myid +1, 
                        "name":this.name, 
                        "sex":this.sex, 
                        "jiguan":this.jiguan, 
                        "phone":this.phone, 
                        "age":this.age,
                    });
                     //添加后清空input
                    this.name = "";
                    this.sex = "";
                    this.jiguan = "";
                    this.phone = "";
                    this.age = "";
                },
                //排序
                sortList:function(){
                    this.showType = true;
                    if(this.type){ //升
                        this.stu.sort((a,b)=>{
                            return a.age - b.age;
                        });
                    }else{//降
                        this.stu.sort((a,b)=>{
                            return b.age - a.age;
                        });
                    }
                    this.type = !this.type;
                }
            },
        });
    </script>
</body>
</html>